<template>
  <div class="page-content">
    <div class="text-right" v-if="view">
      <el-button size="small" class="mb-2 d-print-none" @click="handlePrint">
        <i class="fa fa-print"></i>
        打印
      </el-button>
    </div>
    <div :id="printId" class="p-5 border-noprint">
      <div class="body-panel" v-loading="loading">
        <h4 class="text-center mb-4">担保意向函回执联</h4>
        <div>
          意向函编号：{{ data.gua_org_name_short }}（意向）函字
          <span class="text-decoration">[{{ data.letter_word_no || '-' }}]</span>
          第
          <span class="text-decoration">{{ data.letter_number_no || '-' }}</span>
          号
        </div>
        <div>
          申请人：
          <span class="text-decoration">{{ relatedData.corp_name }}</span>
        </div>
        <div>
          拟担保金额：
          <span class="text-decoration">{{ total }}</span>
          ， 拟担保期限：
          <span class="text-decoration">{{ year }}年</span>
        </div>
        <div>
          出函日期：
          <span class="text-decoration">
            {{ $utils.dateFormat(data.letter_date, 'yyyy年MM月dd日') || '-' }}
          </span>
        </div>
        <div class="d-flex align-items-center">
          <div>受函银行审查受理意见：</div>
          <template v-if="view">
            <span class="text-decoration">{{ data.bank_accept_option }}</span>
          </template>
          <template v-else>
            <el-input
              class="flex-1 input-td"
              v-model="data.bank_accept_option"
              placeholder="受理意见"
            ></el-input>
          </template>
        </div>
        <div>受函银行（盖章）：{{ data.bank_name }}</div>
        <div class="d-flex justify-content-between">
          <div class="d-flex align-items-center">
            签收人（签字）：
            <template v-if="view">
              <span class="text-decoration">{{ data.bank_accept_sign }}</span>
            </template>
            <template v-else>
              <el-input
                class="input-td w-50"
                v-model="data.bank_accept_sign"
                placeholder="签收人签字"
              ></el-input>
            </template>
          </div>
          <div>
            签收日期：
            <template v-if="view">
              <span class="text-decoration">
                {{ $utils.dateFormat(data.bank_accept_date, 'yyyy年MM月dd日') }}
              </span>
            </template>
            <template v-else>
              <span class="text-decoration">{{ $utils.dateFormat(date, 'yyyy年MM月dd日') }}</span>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-2 text-center" v-if="!view">
      <el-button type="primary" style="min-width: 100px" @click="sendLetter(1)">同意</el-button>
      <el-button type="danger" style="min-width: 100px" @click="sendLetter(2)">拒绝</el-button>
    </div>
  </div>
</template>
<script>
import { printA4, nzhToMoney } from '@vimi/utils-tool'
const date = new Date()
export default {
  components: {},
  props: {
    isView: Boolean,
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      loading: false,
      date,
      data: {},
      tableName: 'ele_letter_info',
    }
  },
  watch: {
    relatedData: {
      handler: function () {
        this.getData()
      },
      deep: true,
    },
  },
  created() {
    this.getData()
  },
  computed: {
    user() {
      return this.$store.getters.user
    },
    total() {
      const num =
        this.relatedData.res_funds ||
        this.relatedData.bank_approved_funds ||
        this.relatedData.apply_funds
      return nzhToMoney(num * 10000)
    },
    year() {
      const num = this.relatedData.approval_load_years || this.relatedData.load_years
      const text = nzhToMoney(num)
        .replace('元', '')
        .replace('整', '')
        .replace('角', '月')
        .replace('分', '')
      return text
    },
    printId() {
      return `print-accept-letter-${this.relatedData.customer_related_id}`
    },
    view() {
      return this.isView || +this.relatedData.ele_letter_status > 1
    },
  },
  methods: {
    sendLetter(val) {
      if (!this.data.bank_accept_option) {
        return this.$message.warning('请输入银行审查意见')
      }
      // if (this.data.bank_accept_sign) { return this.$message.warning('请输入银行签字') }
      const data = {
        bank_accept_date: this.$utils.dateFormat(date, 'yyyy-MM-dd hh:mm:ss'),
        bank_accept_option: this.data.bank_accept_option,
        bank_accept_sign: this.data.bank_accept_sign,
        bank_name: this.data.bank_name,
        is_receipted: val,
      }
      this.$utils
        .msgbox({
          message: `确定发送此担保意向函回执联?`,
          type: +val > 1 ? 'error' : 'success',
          beforeClose: () =>
            this.$api.updateData(
              this.$serviceName,
              this.tableName,
              this.data.ele_letter_info_id,
              data
            ),
        })
        .then(() => {
          this.$message.success('发送成功！')
          this.$emit('success', false)
        })
        .catch(() => this.$message.error(`发送失败，请重试！`))
    },
    getData() {
      const params = {
        'customer_related_id.eq': this.relatedData.customer_related_id,
        'ele_letter_type.eq': 1,
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, params)
        .then(res => {
          this.data = (res && res.data && res.data[0]) || {}
          this.$set(this.data, 'bank_accept_sign', this.user.realName)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 2rem;}
        .text-decoration {text-decoration: underline;}
        .body-write {text-align: right;}
         .body-panel { max-width: 794px;margin: 0 auto;font-size: 1.2rem; line-height: 3 }
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.page-content {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
.body-text {
  font-size: 1.2rem;
}
.text-decoration {
  text-decoration: underline;
}
.body-write {
  text-align: right;
}
.border-noprint {
  border: 1px solid $border-color;
}
</style>
